<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="日期" prop="name">
          <el-date-picker v-model="ruleForm.eventTime" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="青铜" prop="bronze">
          <el-input v-model="ruleForm.bronze"></el-input>
        </el-form-item>
        <el-form-item label="白银" prop="silver">
          <el-input v-model="ruleForm.silver"></el-input>
        </el-form-item>
        <el-form-item label="黄金" prop="gold">
          <el-input v-model="ruleForm.gold"></el-input>
        </el-form-item>
        <el-form-item label="铂金" prop="platinum">
          <el-input v-model="ruleForm.platinum"></el-input>
        </el-form-item>
        <el-form-item label="钻石" prop="diamond">
          <el-input v-model="ruleForm.diamond"></el-input>
        </el-form-item>
        <el-form-item label="阅读分红" prop="readBonus">
          <el-input v-model="ruleForm.readBonus"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
  import {
    saveAdvertisement,
    getAdvertisementById
  } from '@/api/service'
  export default {
    data() {
      return {
        ruleForm: {
          "eventTime": '',
          "bronze": '',
          "silver": '',
          "gold": '',
          "platinum": '',
          "diamond": '',
          "readBonus": '',
        },
        rules: {
          eventTime: [{
              required: true,
              message: '日期不能为空',
              trigger: 'blur'
            },
          ],
          bronze: [{
            required: true,
            message: '青铜不能为空',
            trigger: 'blur'
          }],
          silver: [{
            required: true,
            message: '白银不能为空',
            trigger: 'blur'
          }],
          gold: [{
            required: true,
            message: '黄金不能为空',
            trigger: 'blur'
          }],
          platinum: [{
            required: true,
            message: '铂金不能为空',
            trigger: 'blur'
          }],
          diamond: [{
            required: true,
            message: '钻石不能为空',
            trigger: 'blur'
          }],
          readBonus: [{
            required: true,
            message: '阅读分红不能为空',
            trigger: 'blur'
          }],
        }
      };
    },
    mounted() {
      //加载
     if(this.$route.query.id) this.search(this.$route.query.id);
    },
    methods: {
      search(id){
        getAdvertisementById(id).then(res=>{
           this.ruleForm=res;
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.eventTime=this.dateFormat(this.ruleForm.eventTime)
            saveAdvertisement(this.ruleForm).then(res=>{
              this.$router.push('/manage/advertisementList');
            })
          } else {
            console.error('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      dateFormat:(args)=>{
            let fmt="YYYY-mm-dd"
            let ret;
            if(args){
              let  date=new Date(args)
                 const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
            }else{
              return "";
            }
       }
    }
  }
</script>
<style lang="less" scoped>
  .demo-ruleForm {
    text-align: left;
  }
</style>
